
<template>
    <transition name="router-fade" mode="out-in">
        <div>
            <div class="my-header-mask" :class="headerClass"></div>
            <div class="my-header">
                <div class="icon-logo" @click="toPage('home')"></div>
                <div class="icon-toggle-container" @click="toggleRouter(true)">
                    <div class="icon-toggle"></div>
                </div>
            </div>
            <div class="router-mask" @click="toggleRouter(false)" v-if="routerOpen">

            </div>
            <div class="router-container" :style="[{right: routerOpen ? 0 : `-${transitionWidth}px`}]">
                <!--<div class="router-header">
                    <div class="header-logo"></div>
                    <div class="router-close-container" @click="toggleRouter(false)">
                        <div class="router-close"></div>
                    </div>
                </div>-->

                <div class="router-body" :class="{'route-selected': checkoutSelected(route.route)}" @click="toPage(route.route)" v-for="route in routerData">
                    <div class="route-logo" :class="route.route"></div>
                    <span>{{route.name}}</span>
                </div>
            </div>
            <div class="route-container">
                <router-view></router-view>
            </div>
            <my-footer></my-footer>
        </div>
    </transition>
</template>

<script>
    import myFooter from './components/footer'

    export default {
    	created() {
            this.routePath = this.getPath()
        },
        data() {
    		return {
                routerOpen: false,
                routerData: [{
                	name: '首页',
                    route: 'home'
                },{
	                name: '合规税筹',
	                route: 'tax'
                },{
	                name: '全国社保交付',
	                route: 'security'
                },{
	                name: '自由职业者保障',
	                route: 'freelance'
                },{
	                name: '残疾人就业计划',
	                route: 'disabled'
                }],
                headerClass: 'my-header-mask-white',
			    transitionWidth: (window.innerWidth / 750) * 550

			    /*transitionHeight: (window.innerWidth / 750) * 450,*/
            }
        },
        components: {
	        myFooter
        },
        methods: {
    		toggleRouter(flag) {
    			this.routerOpen = flag
            },
            checkoutSelected(route) {
    			let path = this.$route.path
                return path.indexOf(route) !== -1
            },
            toPage(route) {
    			this.$router.push(route)
                document.body.scrollTop  = 0
                this.routerOpen = false
            },
	        handleScroll() {
    			this.headerClass = document.body.scrollTop > this.transitionHeight ? 'my-header-mask-black' : 'my-header-mask-white'
            },
            getPath() {
	            let path = this.$route.path
	            return path.substr(1, path.length)
            }
        },
        computed: {
            routePath() {
	            let path = this.$route.path
	            path = path.substr(1, path.length)
                return path
            },
	        transitionHeight() {
		        let height = this.routePath === 'contact' ? (window.innerWidth / 750) * 220 : (window.innerWidth / 750) * 450
		        return height
	        }
        },
        mounted() {
    		window.addEventListener('scroll', this.handleScroll)
        }
    }
</script>

<style lang="scss">
    @import "./style/function";
    @import "./style/color";

    .router-fade-enter-active, .router-fade-leave-active {
        transition: opacity .3s;
    }
    .router-fade-enter, .router-fade-leave-active {
        opacity: 0;
    }

    #app {
        min-width: 320px;
        width: 100%;
        overflow-x: hidden;
    }

    .my-header-mask {
        width: 100%;
        height: pxToRem(100);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9998;
        transition: 0.5s;
    }

    .my-header-mask-white {
        background-color: $white;
        opacity: 0.08;
    }

    .my-header-mask-black {
        background-color: $black;
        opacity: 0.8;
    }

    .my-header {
        width: 100%;
        height: pxToRem(100);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;

        &:after {
            content: '';
            position: absolute;
            width: 100%;
            height: pxToRem(2);
            background-color: $white;
            opacity: 0.2;
            bottom: pxToRem(-2);
            left: 0;
        }
    }
    
    .icon-logo {
        background-image: url("./images/app/logo.png");
        width: pxToRem(69);
        height: pxToRem(42);
        margin: pxToRem(29) pxToRem(30);
        background-size: 100% 100%;
        float: left;
    }

    .icon-toggle-container {
        float: right;

        .icon-toggle {
            background-image: url("./images/app/toggle.png");
            width: pxToRem(30);
            height: pxToRem(28);
            margin: pxToRem(36) pxToRem(30);
            background-size: 100% 100%;
        }
    }

    .router-mask {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 9999;
    }

    .router-container {
        width: pxToRem(550);
        height: 100%;
        position: fixed;
        z-index: 9999;
        top: 0;
        background-color: $darker-grey;
        transition: 0.5s;
    }

    .router-header{
        height: pxToRem(101);
        margin-bottom: pxToRem(40);

        .header-logo {
            background-image: url("./images/app/logo.png");
            width: pxToRem(69);
            height: pxToRem(42);
            margin: pxToRem(29) 0 0 pxToRem(30);
            background-size: 100% 100%;
            float: left;
        }

        .router-close-container {
            float: right;

            .router-close {
                background-image: url("./images/app/close.png");
                width: pxToRem(24);
                height: pxToRem(24);
                margin: pxToRem(38) pxToRem(30);
                background-size: 100% 100%;
            }
        }
    }

    .router-body {
        position: relative;
        height: pxToRem(40);
        padding: pxToRem(40) pxToRem(30);
        color: $light-grey;
        line-height: pxToRem(44);
        font-size: pxToRem(30);

        .route-logo {
            float: left;
            margin-right: pxToRem(30);
        }

        .home {
            background-image: url("./images/app/route/home.svg");
            background-size: 100% 100%;
            width: pxToRem(40);
            height: pxToRem(40);
        }

        .tax {
            background-image: url("./images/app/route/tax.svg");
            background-size: 100% 100%;
            width: pxToRem(40);
            height: pxToRem(40);
        }

        .security {
            background-image: url("./images/app/route/security.svg");
            background-size: 100% 100%;
            width: pxToRem(40);
            height: pxToRem(40);
        }

        .freelance {
            background-image: url("./images/app/route/freelance.svg");
            background-size: 100% 100%;
            width: pxToRem(40);
            height: pxToRem(40);
        }

        .disabled {
            background-image: url("./images/app/route/disabled.svg");
            background-size: 100% 100%;
            width: pxToRem(40);
            height: pxToRem(40);
        }

        &.route-selected {
            color: $white;

            .home {
                background-image: url("./images/app/route/home2.svg");
            }
            .tax{
                background-image: url("./images/app/route/tax2.svg");
            }
            .security{
                background-image: url("./images/app/route/security2.svg");
            }
            .freelance{
                background-image: url("./images/app/route/freelance2.svg");
            }
            .disabled{
                background-image: url("./images/app/route/disabled2.svg");
            }
        }
    }

</style>

















